<template>
	<view class="bg-gray1">
		<!-- 页面导航 -->
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">收益</block>
		</cu-custom>
		<!-- 收益统计 -->
		<view class="e_content">
			<view class="bg-white e_content_info">
				<view class="flex justify-between align-center">
					<view>
						<view class="sub_title">可提现收入(元)</view>
						<view class="text-black text-bold font-64">
							{{comData.canApply?comData.canApply.toFixed(2):0}}
						</view>
					</view>
					<view>
						<!-- 	<button class="btn" @click="getmClick"
							v-if="comData.canApply&&((userInfo.enable=='1')||(userInfo.enable=='3'))">立即提现</button> -->
						<button class="btn" @click="getmClick">立即提现</button>
					</view>
				</view>
				<view class="flex-row-between e_content_b">
					<view>
						<view class="sub_title">本月预估收入(元)</view>
						<view class="text-black text-bold font-38">
							{{comData.monthTotal ?comData.monthTotal.toFixed(2):0}}
						</view>
					</view>
					<view>
						<view class="sub_title">提现审核中(元)</view>
						<view class="text-black text-bold font-38">
							{{comData.applying ?comData.applying.toFixed(2):0}}
						</view>
					</view>
					<view>
						<view class="sub_title">累计收入(元)</view>
						<view class="text-black text-bold font-38">
							{{comData.totalApply?comData.totalApply.toFixed(2):0 }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding-bottom-sm">
			<!-- 推广订单 -->
			<text-bar title="订单明细" pageUrl="/pages/order/order-list/index"></text-bar>
			<!-- 任务收益 -->
			<text-bar title="任务收益" pageUrl="1"></text-bar>
			<!-- 推广统计 -->
			<view class="b_card extension">
				<view class="b_title">推广统计</view>
				<view class="goods_com">
					<view v-for="(item, index) in dateStatus" :key="index" @click="tabSelect(item,index)"
						class="flex-sub">
						<view class="" :class="'cu-item '+(index==currentTabCur? 'tab_active':'')">{{item.value}}
						</view>
					</view>
				</view>
				<view class="flex flex-wrap justify-between">
					<view class="stats">
						<view class="sub_title">浏览数</view>
						<view class="text-black text-bold font-38">
							{{countData.seeTimes ?countData.seeTimes : 0 }}
						</view>
					</view>
					<view class="stats">
						<view class="sub_title">点击数</view>
						<view class="text-black text-bold font-38">
							{{countData.clickTimes ?countData.clickTimes : 0 }}
						</view>
					</view>
					<view class="stats">
						<view class="sub_title">付款人数</view>
						<view class="text-black text-bold font-38">
							{{countData.payTimes ?countData.payTimes : 0 }}
						</view>
					</view>
					<view class="stats">
						<view class="sub_title">付款金额</view>
						<view class="text-black text-bold font-38">
							{{countData.payAmount ? countData.payAmount.toFixed(2) : '0.00'}}
						</view>
					</view>
					<view class="stats">
						<view class="sub_title">付款订单数</view>
						<view class="text-black text-bold font-38">{{countData.payOrders?countData.payOrders:0}}</view>
					</view>
					<view class="stats">
						<view class="sub_title">平均客单价</view>
						<view class="text-black text-bold font-38">
							{{countData.averagePrice?countData.averagePrice.toFixed(2):'0.00'}}
						</view>
					</view>
					<view class="stats">
						<view class="sub_title">预估收益</view>
						<view class="text-black text-bold font-38">
							{{countData.commission?countData.commission.toFixed(2):'0.00'}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("utils/util.js");
	const app = getApp();
	import api from 'utils/api'
	import textBar from '@/components/text-bar/text-bar.vue'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				userInfo: {},
				tabCur: 0,
				dateStatus: [{
					value: '当日',
					key: '1'
				}, {
					value: '近7日',
					key: '7'
				}, {
					value: '近30日',
					key: '30'
				}],
				currentTabCur: 0, // 当前选中榜单
				comData: {}, // 佣金数据
				countData: {}, // 推广统计数据				
			}
		},
		components: {
			textBar
		},
		onLoad() {

		},
		onShow() {
			// this.initData();
			app.initPage().then(res => {
				app.checkLogin('tabbar').then(res => {
					this.userInfo = uni.getStorageSync('user_info')
					this.currentTabCur = 0
					this.getCommission()
					this.getStatistics()
				})
			})
		},
		methods: {
			// 佣金查询
			getCommission() {
				this.comData = {}
				api.getCommissionById(this.userInfo.id).then(res => {
					this.comData = res.data ? res.data : {},
					
					this.comData.unFreeze = this.comData.unFreeze || 0
					this.comData.applyComplete = this.comData.applyComplete || 0
					this.comData.applying = this.comData.commissionRecord &&  this.comData.commissionRecord[0] || 0
					this.comData.freeze = this.comData.freeze || 0
					
					this.comData.canApply = this.comData.unFreeze - this.comData.applyComplete - this.comData.applying
					this.comData.totalApply = this.comData.unFreeze + this.comData.freeze
				})
			},
			// 推广统计查询
			getStatistics() {
				this.countData = {}
				api.getStatistics(this.dateStatus[this.currentTabCur].key, this.userInfo.id).then(res => {
					this.countData = res.data ? res.data : {}
				})
			},
			// 提现按钮
			getmClick() {
				uni.navigateTo({
					url: '/pages/distribution/distribution-withdraw/index'
				});
			},
			tabSelect(item, i) {
				this.currentTabCur = i
				this.getStatistics()
			}
		}
	}
</script>

<style scoped>
	.e_content {
		background-image: linear-gradient(#FD8CA8, #FFFFFF);
		padding: 30rpx 20rpx 0rpx 20rpx;
	}

	.e_content .e_content_info {
		background-color: #FFFCFE;
		border-radius: 15rpx;
		padding: 20rpx;
	}

	.sub_title {
		color: #4E5969;
		font-size: 24rpx;
		margin-bottom: 14rpx;
	}

	.e_content .e_content_info .btn {
		background-image: linear-gradient(90deg, #FF7A2F, #FF001F);
		color: #fff;
		border-radius: 100rpx;
		font-size: 24rpx;
		padding: 4rpx 30rpx;
	}

	.e_content .e_content_info .e_content_b {
		border-top: 1rpx dashed #E5E6EB;
		margin-top: 30rpx;
		padding-top: 20rpx;
	}

	.b_title {
		color: #333;
		font-weight: bold;
		font-size: 30rpx;
	}

	.b_card {
		background-color: #fff;
		margin: 20rpx 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 15rpx;
	}

	.b_more {
		color: #B3BAC5;
		font-size: 24rpx;
	}

	.extension .stats {
		background-color: #F6F7F9;
		width: 46%;
		border-radius: 15rpx;
		padding: 20rpx 0 20rpx 20rpx;
		margin: 20rpx 0 0;
	}

	.goods_com {
		height: 80rpx;
		color: #4E5969;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.goods_com>view:first-child {
		text-align: left;
	}

	.goods_com>view:last-child {
		text-align: right;
	}

	.goods_com .cu-item {
		padding-bottom: 15rpx;
		display: inline-block;
	}

	.goods_com .tab_active {
		color: #FF001F;
		border-bottom: 6rpx solid #FF001F;
	}
</style>